<template>
    <div class="page-setting">
        <div class="crumbs">
            <router-link to="/">首页</router-link> / <span>系统设置</span> /
            <span class="active">角色管理</span>
        </div>
        <el-container :style="{ height: mainH + 'px' }">
            <el-main class="census-main">
                <div class="opers flex v-c" v-if="hasPermission('006003001')">
                    <el-button
                        type="blue"
                        @click="newAction"
                        :disabled="!$store.getters.hasEditPermission"
                        ><i class="iconfont icon-add"></i> 新增角色</el-button
                    >
                </div>
                <el-table :data="dataList" style="width: 100%" v-loading="loading">
                    <el-table-column
                        type="index"
                        label="序号"
                        width="90"
                        :index="indexMethod"
                    ></el-table-column>
                    <el-table-column prop="name" label="角色名称"></el-table-column>
                    <el-table-column prop="type" label="类型">
                        <template slot-scope="scope">
                            {{ scope.row.type == 1 ? "机构账户" : "单位账户" }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="220">
                        <template slot-scope="scope">
                            <div class="nowrap">
                                <!-- <el-button type="green" @click="authAction(scope.row)">权限访问</el-button> -->
                                <el-button
                                    type="primary"
                                    @click="editAction(scope.row)"
                                    v-if="hasPermission('006003002')"
                                    :disabled="!$store.getters.hasEditPermission"
                                    >编辑</el-button
                                >
                                <el-button
                                    type="green"
                                    @click="deleteAction(scope.row, scope.$index)"
                                    v-if="hasPermission('006003003')"
                                    :disabled="!$store.getters.hasEditPermission"
                                    >删除</el-button
                                >
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    v-if="total > 0"
                    class="text-right mt-20 mr-20"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    layout="prev, pager, next, total, jumper"
                    :total="total"
                >
                </el-pagination>
            </el-main>
        </el-container>

        <!-- 新增角色 start -->
        <el-dialog
            v-if="newModalVisible"
            :title="newModalTitle"
            :visible.sync="newModalVisible"
            width="660px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            destroy-on-close
        >
            <NewRole
                ref="newRole"
                :activeData="activeData"
                @success="submitSuccessAction"
                @fail="adding = false"
                @submitting="adding = true"
                @cancel="newModalVisible = false"
            >
            </NewRole>
            <div slot="footer">
                <el-button type="cancel" @click="newModalVisible = false">取消</el-button>
                <el-button type="primary" :loading="adding" @click="submitAction">确定</el-button>
            </div>
        </el-dialog>
        <!-- 新增角色 end -->
    </div>
</template>
<script>
import NewRole from "@/components/census/setting/RoleNew.vue"
import { mapState } from "vuex"
import utils from "@/assets/js/utils"
export default {
    name: "Notice",
    components: {
        NewRole,
    },
    props: {
        winH: {
            type: Number,
            default: 500,
        },
    },
    data() {
        return {
            loading: false,
            total: 0,
            currentPage: 1,
            pageSize: 10,
            dataList: [],
            orgId: "",

            adding: false,
            newModalTitle: "新增",
            newModalVisible: false,
            activeData: null,
        }
    },
    watch: {},
    computed: {
        mainH() {
            return this.winH - 219
        },
        ...mapState(["siteInfos"]),
        isAdmin() {
            return this.siteInfos && this.siteInfos.userType == 1
        },
    },
    methods: {
        getData(page) {
            this.loading = true
            let params = {
                page: page,
                limit: this.pageSize,
            }
            this.$get("/systemsetup/systemsetup/roleListPage", params).then(
                (res) => {
                    this.loading = false
                    let data = res.data
                    this.currentPage = page
                    this.total = data.totalSize
                    this.dataList = data.Items
                },
                (err) => {
                    this.loading = false
                    if (err.msg) {
                        this.$message.error(err.msg)
                    }
                }
            )
        },
        getDataById(id, cbk) {
            this.$get("/systemsetup/systemsetup/roleDetail", {
                id: id,
            }).then(
                (res) => {
                    let thisData = res.data
                    cbk && cbk(thisData)
                },
                (err) => {
                    //
                }
            )
        },
        indexMethod(index) {
            return (this.currentPage - 1) * this.pageSize + index + 1
        },
        newAction() {
            this.activeData = null
            this.newModalTitle = "新增角色"
            this.newModalVisible = true
        },
        editAction(item) {
            this.getDataById(item.id, (data) => {
                this.activeData = data
                this.newModalTitle = "编辑角色"
                this.newModalVisible = true
            })
        },
        deleteAction(item, index) {
            this.showConfirm("确定删除该角色吗？", () => {
                this.deleting = true
                this.$post("/systemsetup/systemsetup/roleDelete", {
                    id: item.id,
                }).then(
                    (res) => {
                        this.deleting = false
                        this.$message.success("删除成功")
                        this.dataList.splice(index, 1)
                        // this.getData(this.currentPage)
                    },
                    (err) => {
                        this.deleting = false
                        this.$message.error(err.msg)
                    }
                )
            })
        },
        handleCurrentChange(page) {
            this.getData(page)
        },
        submitSuccessAction() {
            this.adding = false
            this.newModalVisible = false
            this.getData(1)
        },
        submitAction() {
            this.$refs.newRole.submitAction()
        },
    },
    created() {
        this.getData(1)
    },
    activated() {},
    mounted() {},
}
</script>
